<template>
  <el-row>
    <el-form :model="researchInfo" :inline="true">
      <el-form-item label="批次号：">
        <el-input v-model.trim="researchInfo.batchNo"></el-input>
      </el-form-item>
      <el-form-item label="入库类型：">
        <el-select v-model="researchInfo.typeId" style="width: 180px">
          <el-option v-for="(item, index) in inboundFieldList" :key="index" :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库名称：">
        <el-select v-model="researchInfo.whId" style="width: 180px">
          <el-option v-for="(item, index) in whList" :key="index" :label="item.name" :value="item.id"></el-option>">
        </el-select>
      </el-form-item>
      <el-form-item label="入库日期范围：">
        <el-date-picker v-model="researchInfo.createTimeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button plain type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="$router.push({ path: '/equipment/inbounddetail/new' })">新建入库单</el-button>
  </el-row>
  <el-row>
    <el-table :data="inboundList">
      <!-- <el-table-column align="center" type="selection"></el-table-column> -->
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column align="center" label="批次号" prop="batchNo"></el-table-column>
      <el-table-column align="center" label="入库类型">
        <template #default="{ row }">
          {{ row.typeId ? inboundFieldList.find(item => item.id === row.typeId).name : null }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="供应商名称" prop="vendorName"></el-table-column>
      <el-table-column align="center" label="所在仓库">
        <template #default="{ row }">
          {{ row.whId ? whList.find(item => item.id === row.whId).name : null }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="入库员" prop="createUserName"></el-table-column>
      <el-table-column align="center" label="入库时间" prop="createTime"></el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button type="primary" plain size="small"
            @click="$router.push({ path: '/equipment/inbounddetail/' + row.batchNo })">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" v-model:current-page="researchInfo.page" v-model:page-size="researchInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]" size="small" layout="total, sizes, prev, pager, next, jumper"
      :total="researchInfo.total" @change="search" />
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import { typeName } from '@/constants/warehouse'
import { getInboundOrders } from '@/api/equipment/whm'
import { getInboundFieldList } from '@/utils/commonData'
import { getWhlist } from '@/api/setting'
const researchInfo = ref({
  batchNo: '',
  typeId: '',
  vendor: '',
  createTimeRange: [],
  page: 1,
  pageSize: 10,
  total: 0
})
const inboundList = ref([])
const inboundFieldList = ref([])
const whList = ref([])
async function init() {
  /** 获取入库类型列表 */
  inboundFieldList.value = await getInboundFieldList()
  // console.log('inboundFieldList', inboundFieldList.value)
  /** 获取仓库列表 */
  whList.value = (await getWhlist(typeName.bpbj)).data.data
  // console.log('whList', whList.value)
  /** 获取入库单列表 */
  await getInboundOrders(researchInfo.value).then(res => {
    // console.log('res', res)
    inboundList.value = res.data.data.records
    researchInfo.value.total = res.data.data.total
  })
}
init()

/** 搜索功能 */
async function search() {
  /** 获取入库单列表 */
  await getInboundOrders(researchInfo.value).then(res => {
    // console.log('search', res)
    inboundList.value = res.data.data.records
    researchInfo.value.total = res.data.data.total
  })
}

</script>
<style scoped lang="less">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 20px;
  margin-right: 50px;
}

:deep(th.el-table__cell) {
  background-color: var(--el-color-primary-light-7) !important;
}
</style>